<template>
  <div class="body">
    <div class="tq" @click="tpXq" :style="{ backgroundImage: 'url(' + displayScenes[bl].url + ')' }"
      v-if="displayScenes[bl]">
      <div class="jt">{{ this.displayScenes[bl].time }}</div>
      <!-- <div class="jn">{{ this.displayScenes[bl].location }}</div> -->
      <div class="la lr" @click="ji">{{ "<" }}</div>
          <div class="ra lr" @click="ze">{{ ">" }}</div>
          <div class="fp">
            <div class="zfp" v-if="bl != 0" @click.stop="bl = 0"></div>
            <div class="zfp sfp" v-else></div>
            <div class="zfp" v-if="bl != 1" @click.stop="bl = 1"></div>
            <div class="zfp sfp" v-else></div>
            <div class="zfp" v-if="bl != 2" @click.stop="bl = 2"></div>
            <div class="zfp sfp" v-else></div>
            <div class="zfp" v-if="bl != 3" @click.stop="bl = 3"></div>
            <div class="zfp sfp" v-else></div>
          </div>
          <el-input placeholder="请输入您想去的地方" prefix-icon="el-icon-search" v-model="content" ref="inputRef">
          </el-input>
      </div>

      <div class="rmTj">
        <div class="tjt">
          <i class="el-icon-share"></i>热门景点推荐
        </div>
        <div v-for="(picture, index) in popularScenes" :key="picture.time" class="tjLi" @click="dtj(index)">
          <div class="tg" :style="{ backgroundImage: 'url(' + picture.url + ')' }"></div>
          <div class="pn">{{ picture.scene }}</div>
          <div class="ns">{{ picture.introduction }}</div>
          <div class="pst">
            <i class="el-icon-map-location"></i>
            {{ picture.location }}
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      userId: 0,
      userName: "",
      txUrl: "",
      displayScenes: [],
      popularScenes: [],
      bl: 0,
      content: "",
    };
  },
  mounted() {
    this.userId = this.$route.params.userId;
    if (this.userId != -1)
      this.hqy();
    else {
      const param1 = this.userId;
      const param2 = this.txUrl;
      const param3 = this.$route.name;
      const param4 = this.userName;
      this.$emit("childEvent", { param1, param2, param3, param4 });
    }
    this.jzy();

  },
  beforeDestroy() {
    const searchIcon = this.$refs.inputRef.$el.querySelector(".el-icon-search");
    searchIcon.removeEventListener("click", this.handleSearch);
  },
  watch: {
    $route() {
      this.userId = this.$route.params.userId;
      this.txUrl = "";
      this.userName = "";
      const param1 = this.userId;
      const param2 = this.txUrl;
      const param3 = this.$route.name;
      const param4 = this.userName;
      this.$emit("childEvent", { param1, param2, param3, param4 });
    },
  },
  methods: {
    hqy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/userMessage/get",
        headers: {
          "Content-Type": "application/json",
          "token": localStorage.getItem("JWT_TOKEN"),
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          _this.userName = response.data.data.username;
          _this.txUrl = response.data.data.txUrl;
          const param1 = _this.userId;
          const param2 = _this.txUrl;
          const param3 = _this.$route.name;
          const param4 = _this.userName;
          _this.$emit("childEvent", { param1, param2, param3, param4 });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    jzy() {
      let _this = this;
      const axios = require("axios");
      let config = {
        method: "get",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/home/get",
        headers: {
          "Content-Type": "application/json",
        },
      };
      axios
        .request(config)
        .then((response) => {
          _this.displayScenes = response.data.data.displayScenes;
          _this.popularScenes = response.data.data.popularScenes;
          _this.$nextTick(() => {
            const searchIcon = _this.$refs.inputRef.$el.querySelector(".el-icon-search");
            searchIcon.addEventListener("click", _this.handleSearch);
            const searchK = _this.$refs.inputRef.$el.querySelector(".el-input__inner");
            searchK.addEventListener("click", (event) => {
              event.stopPropagation();
            });
            searchK.addEventListener("keydown", (event) => {
              if (event.keyCode === 13) {
                _this.handleSearch(event);
              }
            });
            if (_this.userId == -1) {
              if (window.history && window.history.pushState) {
                window.onpopstate = function () {
                  window.history.pushState("forward", null, "");
                  window.history.forward(1);
                };
              }
              window.history.pushState("forward", null, "");
              window.history.forward(1);
            }
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    ze(event) {
      event.stopPropagation();
      if (this.bl == 3) this.bl = 0;
      else this.bl++;
    },
    ji(event) {
      event.stopPropagation();
      if (this.bl == 0) this.bl = 3;
      else this.bl--;
    },
    tpXq() {
      if (this.userId == -1)
        this.$notify.info({
          title: "消息",
          message: "您还未登录请点击右上角头像进行操作",
        });
      else {
        this.$router.push(
          `/home/concreteScene/${this.displayScenes[this.bl].scene}/${this.userId
          }/${this.displayScenes[this.bl].sceneID}/${this.displayScenes[this.bl].city
          }`
        );
        //这里后续要补充登录后的
      }
    },
    handleSearch(event) {
      event.stopPropagation();
      if (this.userId == -1)
        this.$notify.info({
          title: "消息",
          message: "您还未登录请点击右上角头像进行操作",
        });
      else if (this.content == "")
        this.$notify.info({
          title: "消息",
          message: "请输入您要搜索的景点",
        });
      else this.$router.push(`/home/searchPage/${this.userId}/${this.content}`);
      //这里后续要补充登录后的
    },
    dtj(index) {
      if (this.userId == -1)
        this.$notify.info({
          title: "消息",
          message: "您还未登录请点击右上角头像进行操作",
        });
      else {
        this.$router.push(
          `/home/concreteScene/${this.popularScenes[index].scene}/${this.userId}/${this.popularScenes[index].sceneID}/${this.popularScenes[index].city}`
        );
        //这里后续要补充登录后的
      }
    },
  },
};
</script>
<style scoped>
.body {
  user-select: none;
  height: auto;
  min-height: 1000px;
  width: 100%;
}

.tq {
  position: relative;
  width: 60%;
  height: 500px;
  background-color: aqua;
  background-size: 100% 100%;
  margin: 0 auto;
}

.tq:hover {
  cursor: pointer;
}

.jt {
  position: absolute;
  top: 3%;
  left: 9%;
  height: 40px;
  width: auto;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

.jn {
  position: absolute;
  left: 10%;
  top: 11%;
  height: 40px;
  width: 10%;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

.la {
  position: absolute;
  left: 3%;
  top: 50%;
  width: 50px;
  height: 10%;
  margin-top: -25px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.ra {
  position: absolute;
  right: 3%;
  top: 50%;
  width: 50px;
  height: 10%;
  margin-top: -25px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.lr:hover {
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.lr:active {
  background-color: rgba(0, 0, 0, 0.3);
}

.fp {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 20%;
  height: 5px;
  margin-left: -90.4px;
}

.fp:hover {
  cursor: pointer;
}

.zfp {
  width: 22%;
  background-color: rgb(185, 189, 197);
  height: 100%;
}

.sfp {
  background-color: white;
}

.el-input {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 800px;
  height: 10%;
  margin-left: -400px;
}

::v-deep .el-input__inner {
  height: 100%;
  background-color: rgba(74, 82, 89);
  color: white;
  text-indent: 2em;
  font-size: 18px;
}

::v-deep .el-input__inner::placeholder {
  text-indent: 2em;
  font-size: 17px;
  color: pink;
}

::v-deep .el-input__prefix .el-input__icon {
  line-height: 50px;
  font-size: 24px;
  color: pink;
}

.rmTj {
  overflow: hidden;
  width: 60%;
  height: auto;
  min-height: 800px;
  margin: 0 auto;
}

.tjt {
  position: relative;
  margin: 50px 0;
  height: 70px;
  width: 100%;
  line-height: 70px;
  font-size: 22px;
  color: rgba(255, 166, 0, 0.589);
}

.tjLi {
  position: relative;
  width: 99%;
  height: 250px;
  background-color: white;
  margin-bottom: 50px;
  border: 1px rgba(128, 128, 128, 0.5) solid;
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.tjLi:hover {
  cursor: pointer;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

.tg {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 42%;
  height: 80%;
  margin-top: -100px;
  background-color: pink;
  background-size: 100% 100%;
}

.pn {
  position: absolute;
  top: 8%;
  left: 50%;
  height: 20%;
  width: 40%;
  font-size: 20px;
  line-height: 50px;
}

.ns {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 40%;
  height: 7%;
  font-size: 14px;
}

.pst {
  position: absolute;
  left: 50%;
  top: 30%;
  height: 20%;
}
</style>